﻿<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>支付</title>
    <link th:href="@{/css/pay.css}" rel="stylesheet" type="text/css" />
    <head th:include="include :: header"></head>
</head>
<body>
<section class="aui-flexView">
    <form id="payment-add">
        <header class="aui-navBar aui-navBar-fixed">
            <a href="javascript:;" class="aui-navBar-item">
                <i class="icon icon-return"></i>
            </a>
            <div class="aui-center">
                <span class="aui-center-title">订单支付</span>
            </div>
            <a href="javascript:;" class="aui-navBar-item">
                <i class="icon icon-sys"></i>
            </a>
        </header>
        <section class="aui-scrollView">
            <div class="aui-flex aui-flex-gradual">
                <div class="aui-flex-box">
                    <h2>订单编号:</h2>
                    <h2  th:text="${saleOrder.saleorderno}"></h2>
                    <input type="hidden" th:value="${saleOrder.saleorderno}" name="saleorderno">
                </div>
            </div>
            <div class="aui-flex-member-list">

                <p class="aui-total b-line">
                    需要支付： <span class="aui-price" id= "total" th:text="${saleOrder.total}"></span>
                    元
                    <input  name="payAmount" th:value="${saleOrder.total}" type="hidden">
                </p>
                <div class="chi">
                    <div class="aui-flex b-line" style="padding:15px 0">
                        <div class="aui-flex-wx">
                            <img th:src="@{/img/icon-wx.png}" alt="">
                        </div>
                        <div class="aui-flex-box aui-flex-box-clear">
                            <h4>
                                微信支付

                            </h4>
                        </div>
                        <div class="aui-payment-method">
                            <label class="cell-right">
                                <input type="radio" name="payType" value="1">
                                <i class="cell-radio-icon"></i>
                            </label>
                        </div>
                    </div>
                    <div class="aui-flex b-line" style="padding:15px 0">
                        <div class="aui-flex-wx">
                            <img th:src="@{/img/icon-zfb.png}" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h4>支付宝支付</h4>
                        </div>
                        <div class="aui-payment-method">
                            <label class="cell-right">
                                <input type="radio" name="payType" value="2">
                                <i class="cell-radio-icon"></i>
                            </label>
                        </div>
                    </div>

                    <div class="aui-flex b-line" style="padding:15px 0">
                        <div class="aui-flex-wx">
                            <img th:src="@{/img/timg.jpg}" alt="">
                        </div>
                        <div class="aui-flex-box">
                            <h4>现金</h4>
                        </div>
                        <div class="aui-payment-method">
                            <label class="cell-right">
                                <input type="radio" name="payType" value="3">
                                <i class="cell-radio-icon"></i>
                            </label>
                        </div>
                    </div>
                    <div class="aui-flex b-line" th:if="${vip != null}" style="padding:15px 0">
                        <div class="aui-flex-wx">
                            <img th:src="@{/img/vip.jpg}" alt="">
                        </div>
                        <input type="hidden" name="vipId" th:value="${vip.vipId}">
                        <div class="aui-flex-box">
                            <h4>会员卡抵扣 余额：<span class="aui-price" id="vipAccount"th:text="${vip.vipAccount}"></span></h4>
                        </div>
                        <div id="show" class="display:none">
                            <span id="tip" class="aui-price"></span>
                        </div>
                        <div class="aui-payment-method">
                            <label class="cell-right">
                                <input type="radio" name="payType" value="4" id="vip">
                                <i class="cell-radio-icon"></i>
                            </label>
                        </div>

                    </div>
                </div>
            </div>
        </section>

    </form>
</section>
<div th:include="include :: footer"></div>
<script type="text/javascript">
    $(function () {
        $(".aui-cho-box li").click(function() {

            $(this).addClass("on").siblings().removeClass("on");
            tola();
        });

        $("#vip").blur(function () {
            $("#show").hide();

        });

        $("#vip").click(function () {

            var total,vipAccount;
            total = parseFloat($("#total").text());
            vipAccount = parseFloat($("#vipAccount").text());
            console.log(total + " "+ vipAccount);
            if(vipAccount < total){
                $("#tip").html("余额不足！");
                $("#show").show();
                $(this).attr("checked", false);

            }
        });
    });
    function submitHandler() {
        var flag = false;
        var payType= $('input:radio[name="payType"]:checked').val();
        if(payType == null){
            alert("请至少选中一个");
            return ;
        }
        flag = true;
        if (flag) {
            $.operate.save("/payment/add", $('#payment-add').serialize());
        }
    };

    function tola() {
        var $li = $(".aui-cho-box").children("li.on");
        var money = $li.children("i").text();
        var count = $(".auiSks").val();
        $(".aui-total span").text(money * count);
    }
</script>
</body>
</html>

